<!DOCTYPE html>
<html lang="en">
    <head>

        <base target="_top">
        <meta charset="utf-8">
        <title> Thank You Card</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        
        <script 
            src="https://code.jquery.com/jquery-3.7.1.min.js" 
            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
            crossorigin="anonymous">
        </script> 
        <script 
            src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" 
            integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" 
            crossorigin="anonymous">
        </script>

    </head>
    
    <body>

        <h1>Give thanks to your co-workers</h1>

        <form id="TYCardApp">
            
            <div id="rcpt" class="ui-widget">
                <input 
                    type="search" 
                    name="q" 
                    id="searchbox"
                    placeholder="Type in the name of intended recipient">
                
                <button onclick="searchEmp()"> Search </button>
            </div>
            
            <br>

            <div>
                <input type="text" name="empname" id="empname">
                <input type="email" name="empmail" id="empmail">
            </div>

            <br>

            <div id="message">
                <label for="tymsg"> Type in your message </label>
                
                <br>
                
                <textarea 
                    name="tymsg" 
                    id="tymsg" 
                    cols="30" 
                    rows="10"
                    placeholder="Thank you for always helping out..."></textarea>
                <br>
                <button onclick="sendMail()"> Send a message! </button>
            </div>

            <div id="dialog">
                <p>Your message was sent successfully.</p>
            </div>
        </form>

        <script>  
            "use strict";
            
            $(function() {
                google.script.run
                    .withSuccessHandler(writeList)
                    .withFailureHandler(onListFail) 
                    .getList();
            });

            function writeList(list) {
                try {
                    console.log(list);
                    const nameList = JSON.parse(list);
                    console.log(nameList); 
                    $( "#searchbox" ).autocomplete({
                        source: nameList
                    });                    
                } catch (error) {
                    alert("An error occured: " + error);
                }
;
            }
            
            function onListFail() {
                alert("This action failed to complete.");
            }
           
            function preventFormSubmit() {
            var forms = document.querySelectorAll('form');
              for (var i = 0; i < forms.length; i++) {
                forms[i].addEventListener('submit', function(event) {
                  event.preventDefault();
                });
              }
            }
            window.addEventListener('load', preventFormSubmit);
            
            async function searchEmp() {
                try {
                    var searchName = document.getElementById('searchbox').value;
                    console.log("searchName:",searchName);
                    
                    google.script.run
                        .withSuccessHandler(updateFields)
                        .withFailureHandler(onFailure)
                        .searchEmployee(searchName);    
                } catch (error) {
                    alert("An error occured: " + error);
                }
                
            }

            function onFailure(result) {
                alert(result);
            }

            function updateFields(employeeData) {
                try {
                    console.log(employeeData.name);
                    console.log(employeeData.info);
                    document.getElementById('empname').value = employeeData.name;
                    document.getElementById('empmail').value = employeeData.info;                
                } catch (error) {
                    alert("An error occured: " + error);
                }
            }

            async function sendMail() {
                try {
                    var response = {};
                    
                    response.rcptname =document.getElementById("empname")?.value ?? "";
                    response.rcptmail =document.getElementById("empmail")?.value ?? "";
                    response.msg = document.getElementById("tymsg")?.value ?? "";
                    console.log(response);
                    google.script.run
                        .withSuccessHandler(onMailSuccess)
                        .withFailureHandler(onFailure)
                        .sendMsg(response);
                } catch (error) {
                    alert("An error occured: " + error);
                }
            }

            function onMailSuccess() {
                $("#dialog").dialog("open");
            }
 
            $(document).ready(function() {
                // Initialize the dialog
                $("#dialog").dialog({
                    autoOpen: false, // Prevent automatic opening
                    modal: true,     
                    title: "Thank you message confirmation", 
                    width: 400,
                    height: 200,
                    buttons: {
                        "OK": function() {
                        $( this ).dialog( "close" );
                        }      
                     }
            })
        });

        </script>

    </body>
</html>